<template>
  <el-container>
    <el-header>
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">
          <router-link to="/">
            <el-link><i class="el-icon-notebook-1" />接口列表</el-link>
          </router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/new">
            <el-link><i class="el-icon-plus" />新建接口</el-link>
          </router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <el-link
            href="http://www.hasor.net/web/dataql/what_is_dataql.html"
            target="_blank"
            ><i class="el-icon-warning-outline"></i>什么是 DataQL ？</el-link>
        </el-menu-item>
        <el-menu-item index="4">
          <el-link
            @click="backupApi()"
            ><i class="el-icon-monitor"></i>备份数据</el-link>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <div :style="{ height: fullHeight + 'px', overflow: 'hidden' }">
        <router-view />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import request from "./utils/request";
import { ApiUrl } from "./utils/api-const";

export default {
  name: "App",
  data: function () {
    return {
      fullHeight: document.documentElement.clientHeight - 60,
    };
  },
  mounted() {
    this.fullHeight = document.documentElement.clientHeight - 60;
    window.addEventListener("resize", () => {
      return (() => {
        this.fullHeight = document.documentElement.clientHeight - 60;
      })();
    });
    // 按 ctrl + s 保存
    document.addEventListener("keydown", (e) => {
      if (e.ctrlKey && e.keyCode == 83) {
        document.querySelector(".item-save-btn").click();
        e.preventDefault();
        e.stopPropagation();
      }
    });
  },
  methods: {
    backupApi(){
        const self = this;
        request(ApiUrl.apiBackup, {
            'method': 'GET',
        }, response => {
            // 如果服务端失败那么弹出错误消息
            if (!response.data.success) {
                if(response.data.code == -90){
                    this.$message.info(`${response.data.message}`);
                } else {
                    this.$message.error(`${response.data.code}: ${response.data.message}`);
                }
                return;
            }

            this.$alert(
              '备份成功！下载到本地：<a href="'
                + response.data.result + '" target="_blank">点击下载</a>',
              '备份成功', {
              confirmButtonText: '确定',
              type: 'success',
              dangerouslyUseHTMLString: true
            });
        });
    }
  },
};
</script>
<style scoped>
.el-header,
.el-main {
  padding: 0;
}
</style>
